const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webPackCommonConf = require('./webpack.common')
const { merge } = require('webpack-merge')
const { srcPath, distPath } = require('./path')

module.exports = merge(webPackCommonConf, {
  mode: 'production',
  output: {
    path: distPath,
    // contenthash 常用于cdn缓存。我理解的是文件不变的情况下，最后打包出来的hash串也不会变
    filename: 'bundle.[contenthash:8].js',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader', // 生成图片base64
            options: {
              // 小于 8kb 的图片用 base64 格式产出，否则依然沿用 file-loader 的形式，产出 url
              limit: 8 * 1024,
              outputPath: '/img/',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用
    // 配置环境变量
    new webpack.DefinePlugin({
      ENV: JSON.stringify('production'),
    }),
    new CleanWebpackPlugin(), // 会默认清空output里面的文件夹
  ],
})
